import React, { Component } from 'react'
import {Card, Select, Input, Button, Table, message, Modal, Form} from 'antd'
import Icon from '@ant-design/icons';

const Option = Select.Option

export default class Role extends Component {
    state = {
        inp:'',
        categorys:[], //作品列表
        loading: false,
        visible: false,
        usr:'',
        psd:'',
    };

    delTap=(b)=>{
        // console.log(this.state.categorys)
        console.log('b',b)
        fetch('https://wx.original5.xyz:2003/games/',{
            method:'DELETE',
            mode:'cors',
            body:JSON.stringify({
                type:'诗词接龙',
                class:'content',
                gid:b.gid
            })
        }).then(res=> res.json())
        .then((data)=>{
            console.log('del success',data)
        })
        // window.location.reload()
    }

    // 初始化Table的所有列信息
    componentWillMount(){
        this.initColumns()
    }

    initColumns = () =>{
        this.columns = [
            {
                title: 'id',
                dataIndex: 'gid',
            },
            {
                title: '用户id',
                dataIndex: 'uid',
            },
            {
                title: '内容',
                dataIndex: 'gcontent',
            },
            {
                title: '时间',
                dataIndex: 'gtime',
            },
            {
                title: '删除',
                dataIndex: 'delete',
                render:(_,b)=> <Button onClick={(e)=>this.delTap(b)} style={{backgroundColor:'#ffc06f'}}>删除</Button>
            },
        ];
    }
    // 发请求
    componentDidMount(){
        this.getCategorys()
    }

    getCategorys= async ()=>{
        this.setState({ loading:true })
        fetch('https://wx.original5.xyz:2003/games/',{
            method:'GET',
            headers:{
                // 'access-control-allow-origin':'*',
                'Content-Type':'application/json;charset=UTF-8'
            },
        }).then(res=> res.json())
        .then((data)=>{
            console.log('games',data)
            this.setState({
                categorys:data[0]
            })
        })

    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        this.setState({ loading: true });
        setTimeout(() => {
            this.setState({ loading: false, visible: false });
        }, 1000);

        fetch('https://wx.original5.xyz:2003/login/addUser',{
            method:'POST',
            mode:'cors',
            headers:{
                // 'access-control-allow-origin':'*',
                'Content-Type':'application/json;charset=UTF-8'
            },
            body:JSON.stringify({
                username:this.state.usr,
                password:this.state.psd
            })
        }).then(res=> res.json())
        .then((data)=>{
            console.log('add success',data)
        })
        window.location.reload()
    };

    handleCancel = () => {
        this.setState({ visible: false });
    };

    getUsr = (e) => {
        this.setState({
            usr:e.target.value
        })
    }

    getPsd = (e) => {
        this.setState({
            psd:e.target.value
        })
    }

    
    render() {
        const title = (
            <span>
                <Button type="primary" onClick={this.showModal} style={{backgroundColor:'#ffc06f',position:'absolute',right:100}}>
                    + 添加
                </Button>
            </span>
        )

        const { visible, loading } = this.state;
        
        const { categorys } = this.state

        const onFinish = (values: any) => {
            console.log('add Success:', values);
        };

        return (
            <Card title={title}>
                <Table 
                    rowKey='id'
                    bordered={true} 
                    columns={this.columns}
                    dataSource={categorys}
                    pagination={{defaultPageSize:5, showQuickJumper:true}}
                />

                <Modal
                    visible={visible}
                    title="添加管理员"
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>
                            返回
                        </Button>,
                        <Button key="submit" type="primary" htmlType="submit" onClick={this.handleOk} style={{backgroundColor:'#ffc06f'}}>
                            确定
                        </Button>,
                    ]}
                >
                    <Form
                        name="basic"
                        onFinish={onFinish}
                        autoComplete="off"
                        >
                        <Form.Item
                            label="Username"
                            name="username"
                        >
                            <Input onChange={this.getUsr} />
                        </Form.Item>

                        <Form.Item
                            label="Password"
                            name="password"
                        >
                            <Input.Password onChange={this.getPsd}/>
                        </Form.Item>
                    </Form>
                </Modal>
            </Card>
        )
    }
}
